<header id="header">
	<!-- search bar -->
	<div id="search">	
		<ul>	
			<li><input id="searchBar" type="text" placeholder="Tìm kiếm..."/></li>
			<li><button id="btnSearch"></button></li>
			<li id="login" >				
				<a href="#" id="btnRegister" class="signIn">Đăng kí</a>
				<a href="#" id="btnLogin" class="signIn">Đăng nhập</a>
			</li>
			<li id="profile" class="signIn hide">
				<div id="myProfileId">					
					<img id="icon-avatar" />
					<span class="profile" id="profileUserName">guess</span>
					<span class="arrowDown"></span>					
				</div>
			</li>
		</ul>
	</div>
	<div id="panel" class="hide">
		<div id="signIn">
			<div class="label">Tên tài khoản :</div>
			<div>
				<input id="txtNickName" type="text" class="inputPopup"/>
			</div>
			<div class="label">Mật khẩu :</div>
			<div>
				<input id="txtPass" type="password" class="inputPopup"/>
			</div>
			<div id="forgotPass"><a href="">Quên mật khẩu?</a></div>
			<div>
				<input type="checkbox" id="rememberPass" />
				<p id="rememberMe">Nhớ mật khẩu</p>
			</div>
			<div>
				<input type="button" id="btnSignIn" value="Đăng nhập" class="signIn" />
			</div>
		</div>		
	</div>
	<div id="profilePanel" class="hide">
		<div class="profileContent">
			<img id="profilePicture"/>
			<div id="profileDetail">
				<div id="profileChangePasswordBtnId" class="profileRow">Thay đổi mật khẩu</div>
				<div id="changeYourAvatarBtnId" class="profileRow">Thay đổi avatar</div>
				<div id="profileLogOutBtnId" class="profileRow">Đăng xuất</div>
			</div>
		</div>		
	</div>
	<div id="logo"></div>
	<!-- cart -->
	<div id="cart">
		<div id="cart-content">
			Cart: 0
		</div>
	</div>
	<!-- Main menu -->
	<div id="menu">
		<ul id="menu-content" class="menu-content">
			<li id="home">
				<span>Trang chủ</span>
			</li>
			<li id="books">
				<span>Sách</span>
			</li>			
			<li id="contact">
				<span>Liên hệ</span>
			</li>
		</ul>
	</div>
	<div id="header-line" class="line"></div>
</header>